import { getActiveRanking as getActiveRankingApi } from '@/api/statistics'
import * as echarts from 'echarts'

import { onMounted, ref } from 'vue'

let ranking = ref([])
function getActiveRanking() {
  getActiveRankingApi().then((res: any) => {
    ranking.value = res.data

    randerRanking(res.data)
  })
}

const randerRanking = function (list: any[]) {
  let myChart = echarts.init(document.getElementById('ranking') as HTMLElement)

  let nickname: string[] = []
  let article_count: number[] = []
  let fav_count: number[] = []

  list.forEach((v) => {
    nickname.push(v.nickname)
    article_count.push(v.article_count)
    fav_count.push(v.fav_count)
  })

  //   console.log(nickname)
  //   console.log(article_count)

  const labelOption = {
    show: true,
    position: 'center',
    distance: 0,
    align: 'center',
    verticalAlign: 'center',
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 12,
    rich: {
      name: {}
    }
  }

  let option = {
    //  X
    xAxis: {
      type: 'category',
      data: nickname,
      axisLabel: { interval: 0 }
    },
    //Y
    yAxis: {
      type: 'value'
    },
    // 工具栏
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar', 'stack'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['文章数据', '收藏']
    },
    //  数据
    series: [
      {
        data: article_count,
        type: 'bar',
        name: '文章数据',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        }
      },
      {
        data: fav_count,
        type: 'bar',
        name: '收藏',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        }
      }
    ]
  }

  myChart.setOption(option)
}

export function useRanking() {
  onMounted(() => {
    getActiveRanking()
  })
}
